<script setup>
    import { Search,Sunny,Moon,Language } from '@vicons/ionicons5'
    import { useSystemStore } from "@/stores/systemStore"
    const systemStore = useSystemStore()

    const route = useRoute();

    // 快捷菜单
    const menuList =  [
        {
            name: '首页',
            path: '/',
        },
        {
            name: '考试',
            path: '/paper/1',
        },
        {
            name: '拼团',
            path: '/list/group/1',
        },
        {
            name: '秒杀',
            path: '/list/flashsale/1',
        },
        {
            name: '直播',
            path: '/list/live/1',
        },
        {
            name: '专栏',
            path: '/list/column/1',
        },
        {
            name: '社区',
            path: '/bbs/0/1',
        },
        {
            name: '课程',
            path: '/list/course/1',
        }
    ]

    const openPage = (path) => {
        navigateTo(path)
    }

    //系统菜单
    const sysOptions = [
        {
          label: '个人中心',
          key: 'center',
        },
        {
          label: '退出',
          key: 'logout',
        }
    ]

    // 语言选项
    const languageOptions = [
        {

          label: '简体中文',
          key: 'zh-CN',
        },
        {
          label: '英文',
          key: 'en-US',
        }
    ]

    const handleSelectLanguage = (key) => {
        systemStore.changeLanguage(key)
    }
</script>

<template>
    <div class="navbar">
        <div class="container w-[100%] h-[60px] flex items-center">
            <n-button class="text-xl font-bold mr-4" text color="#333">麒麟物联网</n-button>
            <div class="flex items-center">
                <div v-for="(item,idx) in menuList" :key="idx" @click="openPage(item.path)"
                    class="menu-item" :class="{'menu-item-active': route.path === item.path}" >{{ item.name }}</div>
            </div>

             <!-- 中英文  -->
             <n-dropdown :options="languageOptions" trigger="click" @select="handleSelectLanguage">
                <n-button circle class="ml-auto  mr-5" ghost text color="#333">
                    <template #icon>
                        <n-icon><Language/></n-icon>
                    </template>
                </n-button>
            </n-dropdown>

            <!-- 暗黑模式 -->
            <n-popover trigger="hover">
                <template #trigger>
                    <n-button circle class="mr-5" ghost text @click="systemStore.changeTheme" color="#333">
                        <template #icon>
                            <n-icon v-if="systemStore.isDark"><Moon/></n-icon>
                            <n-icon v-else><Sunny/></n-icon>
                        </template>
                    </n-button>
                </template>
                <span>{{ systemStore.isDark? "暗黑模式" : "明亮模式" }}</span>
            </n-popover>

            <!-- 搜索 -->
            <n-button circle class="mr-5" ghost text color="#333">
                <template #icon>
                    <n-icon><Search/></n-icon>
                </template>
            </n-button>
            <n-dropdown :options="sysOptions" class="mr-auto text-center">
                <n-avatar
                    round
                    size="medium"
                    src="https://ww1.sinaimg.cn/mw690/005UJ76vgy1hrdjp386jmj30m80m8gqj.jpg"
                />
            </n-dropdown>
        </div>
    </div>
    <div class="w-[100%] h-[60px]"></div>
</template>



<style>
.navbar {
    z-index: 1000;
    @apply bg-white fixed top-0 left-0 right-0 shadow-sm
}

.menu-item {
    @apply px-2 py-1 mx-1 rounded cursor-pointer hover:(bg-blue-50 text-blue-700) active:(bg-blue-100 text-blue-700)
}

.menu-item-active {
    @apply px-2 py-1 mx-1 rounded bg-blue-100 text-blue-700
}
</style>